<template>
  <div>
    <a-layout-content>
      <div class="to-detail">
        <div>数据更新时间 2020年1月8日</div>
      </div>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="累计改造完成用户数">
            <a slot="extra">户</a>
            <num-animate :allUserNumber="allUserNumber"></num-animate>
            <div style="margin-bottom:16px;">完成占比<span style="color:rgb(242,174,25)">46%</span></div>
          </a-card>
          <pile-bar></pile-bar>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="减碳量">
            <a-button-group slot="extra">
              <a-button v-for="(val, index) in CO2Years" :type="val.type" @click="CO2YearsChange(val)" :key="index">{{
                val.name
              }}</a-button>
            </a-button-group>
            <dash-board :chartData="CO2Num"></dash-board>
          </a-card>
        </a-col>
        <a-col :span="12">
          <div class="map-box">
            <hot-map></hot-map>
          </div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="氮氧化物">
                <a-button-group slot="extra">
                  <a-button
                    v-for="(val, index) in NO2Years"
                    :type="val.type"
                    @click="NO2YearsChange(val)"
                    :key="index"
                  >{{ val.name }}</a-button
                  >
                </a-button-group>
                <dash-board :chartData="NO2Num"></dash-board>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="标煤">
                <a-button-group slot="extra">
                  <a-button v-for="(val, index) in CYears" :type="val.type" @click="CYearsChange(val)" :key="index">{{
                    val.name
                  }}</a-button>
                </a-button-group>
                <dash-board :chartData="CNum"></dash-board>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="6">
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="累计改造完成面积数">
            <a slot="extra">平米</a>
            <num-animate :allAreaNumber="allAreaNumber"></num-animate>
            <div style="margin-bottom:16px;">完成占比<span style="color:rgb(242,174,25)">46%</span></div>
          </a-card>
          <cross-bar4></cross-bar4>
          <a-card class="index-ant-card" :style="{ 'margin-bottom': '16px' }" size="small" title="减硫量">
            <a-button-group slot="extra">
              <a-button v-for="(val, index) in SO2Years" :type="val.type" @click="SO2YearsChange(val)" :key="index">{{
                val.name
              }}</a-button>
            </a-button-group>
            <dash-board :chartData="SO2Num"></dash-board>
          </a-card>
        </a-col>
      </a-row>
      <!-- <num-animate></num-animate> -->
    </a-layout-content>
  </div>
</template>

<script>
import NumAnimate from '@/components/CleanBaskDemo/numAnimate'
import HotMap from '@/components/CleanBaskDemo/hotMap'
import ScalePie from '@/components/CleanBaskDemo/scalePie'
import BarLine from '@/components/CleanBaskDemo/barLine'
import Doughnut from '@/components/CleanBaskDemo/doughnut'
import Rose from '@/components/CleanBaskDemo/rose'
import PileBar from '@/components/CleanBaskDemo/pileBar'
import DashBoard from '@/components/CleanBaskDemo/dashBoard'
import CrossBar4 from '@/components/CleanBaskDemo/crossBar4'
export default {
  name: 'EffectManagement',
  components: {
    HotMap,
    ScalePie,
    BarLine,
    Doughnut,
    Rose,
    NumAnimate,
    PileBar,
    DashBoard,
    CrossBar4
  },
  data () {
    return {
      areaList: [
        { name: '清徐县', checked: true },
        { name: '阳曲县', checked: false },
        { name: '娄烦县', checked: false },
        { name: '小店区', checked: false },
        { name: '迎泽区', checked: false },
        { name: '杏花岭区', checked: false },
        { name: '尖草坪区', checked: false },
        { name: '万柏林区', checked: false },
        { name: '晋源区', checked: false },
        { name: '古交市', checked: false }
      ],
      targetArea: '清徐县',
      allUserNumber: 5411, // 累计改造完成用户数
      allAreaNumber: 1642105, // 累计改造完成面积数
      // 2019年度用户台账数据
      standingBook: {
        name: '2019年度用户台账',
        data: [
          { name: '已完成用户数', value: 2865 },
          { name: '未完成用户数', value: 568 }
        ],
        total: 3433
      },
      // 各区域用户数量
      areaUserNum: {
        name: '各区域用户数量',
        data: [
          { value: 17, name: '刘家堡乡' },
          { value: 23, name: '坞城街道' },
          { value: 27, name: '营盘街道' },
          { value: 33, name: '西温庄' },
          { value: 9, name: '北格镇' }
        ]
      },
      // 减碳量
      CO2Years: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      CO2Num: [
        {
          value: 64,
          name: '减碳量',
          code: 'CO2'
        }
      ],
      // 氮氧化物
      NO2Years: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      NO2Num: [
        {
          value: 64,
          name: '氮氧化物',
          code: 'NO2'
        }
      ],
      // 标煤
      CYears: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      CNum: [
        {
          value: 64,
          name: '标煤',
          code: 'C'
        }
      ],
      // 减硫量
      SO2Years: [
        { name: '2018年', type: 'primary' },
        { name: '2019年', type: '' },
        { name: '2020年', type: '' }
      ],
      SO2Num: [
        {
          value: 64,
          name: '减硫量',
          code: 'SO2'
        }
      ]
    }
  },
  methods: {
    areaClick (index) {
      this.areaList.forEach((ele, n) => {
        ele.checked = false
        if (index === n) {
          ele.checked = true
          this.targetArea = ele.name
        }
      })
    },
    mapChange (name) {
      console.log(name)
      this.areaList.forEach(ele => {
        ele.checked = false
        if (name === ele.name) {
          ele.checked = true
          this.targetArea = ele.name
        }
      })
    },
    CO2YearsChange (val) {
      this.CO2Years.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.CO2Num[0].value = 64
          return
        case '2019年':
          this.CO2Num[0].value = 74
          return
        case '2020年':
          this.CO2Num[0].value = 84
      }
    },
    NO2YearsChange (val) {
      this.NO2Years.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.NO2Num[0].value = 64
          return
        case '2019年':
          this.NO2Num[0].value = 74
          return
        case '2020年':
          this.NO2Num[0].value = 84
      }
    },
    CYearsChange (val) {
      this.CYears.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.CNum[0].value = 64
          return
        case '2019年':
          this.CNum[0].value = 74
          return
        case '2020年':
          this.CNum[0].value = 84
      }
    },
    SO2YearsChange (val) {
      this.SO2Years.forEach(ele => {
        ele.type = ''
      })
      val.type = 'primary'
      switch (val.name) {
        case '2018年':
          this.SO2Num[0].value = 64
          return
        case '2019年':
          this.SO2Num[0].value = 74
          return
        case '2020年':
          this.SO2Num[0].value = 84
      }
    }
  }
}
</script>

<style lang="less" scoped>
.ant-layout-content {
  padding: 0 16px;
  .map-box {
    position: relative;
    .supplier-list {
      position: absolute;
      bottom: 16px;
      right: 16px;
      color: #fff;
      margin: 0;
      padding: 16px 0;
      list-style: none;
      border: 1px solid rgb(11, 26, 92);
      background: rgb(6, 13, 60);
      li {
        padding: 0 24px;
        font-size: 12px;
        text-align: center;
        margin-bottom: 8px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin: 0;
        }
        &.checked::after {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 3px;
          border: 1px solid #fff;
          left: 10px;
          top: 50%;
          margin-top: -3px;
        }
      }
    }
  }
}
.to-detail {
  overflow: hidden;
  padding: 16px;
  div,
  a {
    float: right;
    color: rgb(8, 67, 237);
  }
}
</style>
